<!DOCTYPE html>
<html lang="zh-CN" class="uk-height-1-1">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="hostname" content="feling.net">
    <meta name="description" content="聆熵在线工具，提供base64图片编码解码、json格式化、websocket联调等在线工具">
    <meta name="keywords" content="base64图片,json格式验证,base64编码解码">
    <meta name="robots" content="all">
    <meta name="author" content="feling.net">
    <title>base64图片，json格式验证，base64编码解码—聆熵信息</title>
    <link rel="stylesheet" href="//cdn.feling.net/css/uikit.min.css" media="all">
    <link rel="icon" type="image/png" href="//cdn.apihub.net/img/favicon.png">
    <script src="//cdn.apihub.net/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.apihub.net/js/vue.min.js"></script>
    <script src="//cdn.feling.net/js/uikit.min.js"></script>
</head>

<body class="uk-height-1-1">
    <header>
        <!-- 浏览器兼容性检测 -->
        <div id="iiie"></div>
        <script>
            IIIE = new Vue({el:"#iiie"});
        </script>
        <script>
            if (typeof IIIE == 'undefined') {
                alert("该网页不支持您的浏览器版本，推荐使用 chrome 浏览器")
            }
        </script>

        <!-- 网络联通性检测 -->
        <div id="the-gfw"></div>
        <script>
            let gfw_tester = $.ajax({
                url: "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=xxx", 
                complete: function (data) {
                    if (data.statusText !== "timeout") {
                        $('#the-gfw').trigger('passible')
                    }
                },
                timeout: 2000
            });
        </script>

        <nav class="uk-navbar">
            <div href="/" class="uk-navbar-brand" 
                onmouseover="$('#brand-img').addClass('brand-img-animation')"
                onmouseout="$('#brand-img').removeClass('brand-img-animation')">
                <img alt="logo" id="brand-img" class="brand-img-animation" width="28px;" height="28px;" src="//cdn.apihub.net/img/spinner.png">
                <span class="uk-visible-large">聆熵信息</span>
            </div>
            <style>
                .brand-img-animation {
                    animation: uk-rotate 0.8s;
                    animation-delay:0.4s;
                }
            </style>
            <ul class="uk-navbar-nav">
                <li><a href="/json-intro.html">首页</a></li>
                <li class="uk-active"><a disabled>产品中心</a></li>
                <li><a href="/about.html">关于我们</a></li>
                <li><a href="/contact.html" rel="nofollow">联系我们</a></li>
            </ul>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav" id="disqus_thread_modal_entrance">
                    <li><a href="#disqus_thread_modal" rel="nofollow" data-uk-modal>反馈与意见</a></li>
                </ul>
                <div id="disqus_thread_modal" class="uk-modal">
                    <div class="uk-modal-dialog">
                        <a class="uk-modal-close uk-close"></a>
                        <div id="disqus_thread">您的网络环境无法加载 disqus 的评论模块</div>
                    </div>
                    <script>
                        var disqus_config = function () {
                            this.page.url = "https://feling.net/";
                            this.page.identifier = "https://feling.net/";
                        };
                        $('#the-gfw').on('passible', function() {
                            var d = document, s = d.createElement('script');
                            s.src = '//feling.disqus.com/embed.js';
                            s.setAttribute('data-timestamp', + new Date());
                            (d.head || d.body).appendChild(s);
                        });
                    </script>
                </div>
            </div>
        </nav>
    </header>
    <hr style="margin:0;">

    <div id="content" style="
            min-height:calc(100% - 90px - 40px - 17px);
            padding-top: 15px;
            padding-right: 15px;
            overflow-x: hidden;">
        <div style="margin-bottom:35px;">
            <ul class="uk-tab" data-uk-tab="{connect:'#tab-1'}" style="margin-bottom:10px;">
                <li class="uk-active" style="margin-left: 10px;"><a>前后端联调</a></li>
                <li><a>介绍</a></li>
            </ul>
            <ul id="tab-1" class="uk-switcher uk-margin">
                <li>
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/json/"> 
                        <div style="text-align:left;font-size:18px">Json 格式化</div> 
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">格式化、高亮、折叠你的 json 字符串</p>
                    </a>
                        
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/base64/"
                        onclick="localStorage.base64_activeTab = 1;"> 
                        <div style="text-align:left;font-size:18px">Base64_图片</div>
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">base64 编码、解码。支持图片、文字</p>
                    </a>
        
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/base64/"
                        onclick="localStorage.base64_activeTab = 0;"> 
                        <div style="text-align:left;font-size:18px">Base64_字符串</div>
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">base64 编码、解码。支持文字、图片</p>
                    </a>
                    
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/wsp/"> 
                        <div style="text-align:left;font-size:18px">WSP -- WebSocket 联调工具</div> 
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">用于 WebSocket 接口收发消息测试</p>
                    </a> 
        
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/unicode/"> 
                        <div style="text-align:left;font-size:18px">unicode 解码</div>
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">\uxxxx 转中文</p>
                    </a>
        
                    <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/timestamp/"> 
                        <div style="text-align:left;font-size:18px">时间戳 ⇄ 时间</div>
                        <hr style="margin:0">
                        <p style="text-align:left;font-size:11px;margin:0px;">把 毫秒数 转成人类友好的字符串</p>
                    </a>
                </li>
                <li style="margin: 10px 50px;">
                    在前后端分离的结构中，通常使用http协议来建立前端程序与后端程序之间的通信。某些特殊的业务也许还会用到websocket协议。而在通信中最经常用到的数据格式，就是json。<br><br>
                    
                    由于通信的双方是程序。<br>
                    json字符串通常是去掉空白符号的。<br>
                    表示图片时，通常会使用base64编码，这样统一用文本处理，写代码时更简单。<br>
                    表示时间时，通常会使用时间戳，以避免格式、时区带来的影响。<br><br>

                    但是，查看通信内容的不只是程序，开发工程师们也经常需要人工查看接口返回值。feling.net 的前后端联调工具，提供了：<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;1. json格式化工具，可以对json字符串补充空白字符，即换行、空格、缩进等。支持语法高亮、折叠等功能。方便开发人员查看json格式。<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;2. base64编码解码工具，可以方便的实现图片、文字与其对应base64编码之间的转换。<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;3. websocket联调工具，用于测试websocket接口。<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;4. 时间戳转换工具，可以把时间戳转换成人类友好的格式。<br><br>

                    网上可能随便一搜都能出来一大堆这样的工具，原本并没有什么动力自己做一套的。直到有一次见到同事使用网上随便搜索到的base64转图片的工具时。见到满屏的广告、选择上传图片后还需要手动选择图片格式？、手动再点个确定？、操作的窗口特别小等等糟糕的用户体验。

                </li>
            </ul>
        </div>

        <div style="margin-bottom:35px;">
            <ul class="uk-tab" style="margin-bottom:10px;">
                <li class="uk-active" style="margin-left: 10px;">
                    <a href="javascript:return false;" style="
                        color: #000;
                        cursor:default;">ng echo</a>
                </li>
            </ul>
            <div style="margin: 0px 0px 10px 10px;
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 0 12px;
                        background: #eee;
                        vertical-align: middle;
                        line-height: 30px;
                        min-height: 30px;
                        font-size: 1rem;
                        text-decoration: none;
                        text-align: center;" > 
                <div style="text-align:left;font-size:18px">我的出口IP是多少？</div>
                <hr style="margin:0">
                <code style="text-align:left;font-size:11px;margin:0px;">
                    curl <a href="https://ip.feling.net" rel="nofollow">ip.feling.net</a>
                </code>
            </div>
            <div style="margin: 0px 0px 10px 10px;
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 0 12px;
                        background: #eee;
                        vertical-align: middle;
                        line-height: 30px;
                        min-height: 30px;
                        font-size: 1rem;
                        text-decoration: none;
                        text-align: center;" > 
                <div style="text-align:left;font-size:18px">现在几点了？</div>
                <hr style="margin:0">
                <code style="text-align:left;font-size:11px;margin:0px;">
                    curl <a href="https://api.feling.net/now" rel="nofollow">https://api.feling.net/now</a>
                </code>
            </div>
        </div>

        <div style="margin-bottom:35px;">
            <ul class="uk-tab">
                <li class="uk-active" style="margin-left: 10px;">
                    <a href="javascript:return false;" style="
                        color: #000;
                        cursor:default;">ws2s 系列</a>
                </li>
            </ul>
            <style>
                #SvgjsSvg1035 {
                    margin: 10px 10px 0px 10px;
                    border: 1px #eee solid;
                    width: 740px;
                }
                @media(max-width: 460px) {
                    #SvgjsSvg1035 {
                        width:100%;
                    }
                }
            </style>
            <svg style="margin-bottom: 10px;" viewBox="0 0 622 220" id="SvgjsSvg1035" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1036"><marker id="SvgjsMarker1052" markerWidth="16" markerHeight="12" refX="0" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1053" d="M15,1.5 L2,6 L15,10.5" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1054" markerWidth="16" markerHeight="12" refX="16" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1055" d="M0,2 L14,6 L0,11 L0,2" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1059" markerWidth="16" markerHeight="12" refX="0" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1060" d="M15,1.5 L2,6 L15,10.5" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1061" markerWidth="16" markerHeight="12" refX="16" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1062" d="M0,2 L14,6 L0,11 L0,2" fill="#323232" stroke="#323232" stroke-width="2"></path></marker></defs><rect id="SvgjsRect1037" width="622" height="220" fill="#ffffff"></rect><g id="SvgjsG1038" transform="translate(508,85)"><image id="SvgjsImage1039" xlink:href="https://cdn.feling.net/images/KVStore.svg" width="89" height="86" preserveAspectRatio="none"></image><g id="SvgjsG1040"><foreignObject id="SvgjsForeignObject1041" width="129" height="32" x="-20" style="overflow:visible;" y="85"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 129px; word-break: break-word; border: 0px;">TCP server<div></div> such as redis</div></foreignObject></g></g><g id="SvgjsG1042" transform="translate(292,85)"><image id="SvgjsImage1043" xlink:href="https://cdn.feling.net/images/ResilientNetworkIP.svg" width="86" height="86" preserveAspectRatio="none"></image><g id="SvgjsG1044"><foreignObject id="SvgjsForeignObject1045" width="126" height="16" x="-20" style="overflow:visible;" y="93"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 126px; word-break: break-word; border: 0px;">ws2s server</div></foreignObject></g></g><g id="SvgjsG1046" transform="translate(25,92.5)"><image id="SvgjsImage1047" xlink:href="https://cdn.feling.net/images/Laptop.svg" width="114" height="71" preserveAspectRatio="none"></image><g id="SvgjsG1048"><foreignObject id="SvgjsForeignObject1049" width="154" height="32" x="-20" style="overflow:visible;" y="70"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 154px; word-break: break-word; border: 0px;">javaScript<div> running on a browser</div></div></foreignObject></g></g><g id="SvgjsG1050"><path id="SvgjsPath1051" d="M133 128L212.5 128L212.5 128L292 128" stroke-dasharray="8,5" stroke="#323232" stroke-width="2" fill="none" marker-start="url(#SvgjsMarker1052)" marker-end="url(#SvgjsMarker1054)"></path><foreignObject id="SvgjsForeignObject1056" width="65" height="16" x="180" y="120"><div xmlns="http://www.w3.org/1999/xhtml" style="vertical-align: top; text-align: center; color: rgb(50, 50, 50); line-height: 16px; font-size: 13px; font-family: 微软雅黑; white-space: nowrap; display: inline-block; background: rgb(255, 255, 255);">websocket</div></foreignObject></g><g id="SvgjsG1057"><path id="SvgjsPath1058" d="M378 128L443 128L443 128L508 128" stroke-dasharray="10,5,3,5" stroke="#323232" stroke-width="2" fill="none" marker-start="url(#SvgjsMarker1059)" marker-end="url(#SvgjsMarker1061)"></path><foreignObject id="SvgjsForeignObject1063" width="40" height="16" x="423" y="120"><div xmlns="http://www.w3.org/1999/xhtml" style="vertical-align: top; text-align: center; color: rgb(50, 50, 50); line-height: 16px; font-size: 13px; font-family: 微软雅黑; white-space: nowrap; display: inline-block; background: rgb(255, 255, 255);">socket</div></foreignObject></g><g id="SvgjsG1064" transform="translate(25,25)"><path id="SvgjsPath1065" d="M 0 0L 572 0L 572 40L 0 40Z" stroke="none" fill="none"></path><g id="SvgjsG1066"><foreignObject id="SvgjsForeignObject1067" width="572" height="25" x="0" style="overflow:visible;" y="7.5"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 20px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 25px; width: 572px; word-break: break-word; border: 0px;"><b>ws2s -- 让运行在浏览器上的 js 具备使用 socket 通信的能力</b></div></foreignObject></g></g></svg>
            <div style="display: inline-block;margin: 10px 0px 0px 10px;" class="uk-text-top">
                <p>使用案例：</p>
                <a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/redis/"> 
                    <div style="text-align:left;font-size:18px">Fredis</div> 
                    <hr style="margin:0">
                    <p style="text-align:left;font-size:11px;margin:0px;">网页版 redis 客户端</p>
                </a> 
            </div>
        </div>

        <div style="display: block;height: 1px;overflow: hidden;">
            <li><a href="/rank/base64-19.html">base64编码解码 应该满足用户的哪些使用需求？</a></li>
            <li><a href="/rank/base64-18.html">人性化的base64编码解码工具 让程序员的工作变得更加轻松/a></li>
            <li><a href="/rank/base64-17.html">给大家推荐一款好用的base64图片编码解码在线工具</a></li>
            <li><a href="/rank/base64-16.html">base64编码解码---图片传输的灵魂</a></li>
            <li><a href="/rank/base64-15.html">浅谈base64图片在网站制作中使用的优缺点，值得收藏！</a></li>
            <li><a href="/rank/base64-14.html">base64图片转换工具应有怎样利于用户的特点？</a></li>
            <li><a href="/rank/base64-13.html">运用base64编码解码技术，可以更快速传输数据</a></li>
            <li><a href="/rank/base64-12.html">base64图片，漳州开发区聆熵信息技术服务工作室为您服务</a></li>
            <li><a href="/rank/base64-11.html">base64图片，你了解多少？</a></li>
            <li><a href="/rank/base64-10.html">base64编码解码发挥什么样的信息技术服务</a></li>
            <li><a href="/rank/json-06.html">漳州开发区聆熵信息技术服务工作室，是您json格式验证的选择</a></li>
            <li><a href="/rank/base64-09.html">5G时代，base64编码解码技术帮你快速解决网页图片难题！</a></li>
            <li><a href="/rank/base64-08.html">base64编码解码的过程中需要注意的问题</a></li>
            <li><a href="/rank/json-05.html">从json的发展史我们看在线json格式验证</a></li>
            <li><a href="/rank/base64-07.html">为什么使用base64编码解码</a></li>
            <li><a href="/rank/base64-06.html">你知道base64编码解码吗</a></li>
            <li><a href="/rank/json-04.html">json格式验证困扰编程新手怎么办？</a></li>
            <li><a href="/rank/json-03.html">json的简单科普、base64 编码的的应用举例</a></li>
            <li><a href="/rank/json-02.html">在线json格式验证：一键格式更规范，阅读更方便！</a></li>
            <li><a href="/rank/base64-05.html">教你了解base64图片处理</a></li>
            <li><a href="/rank/base64-04.html">base64图片编码的相关知识</a></li>
            <li><a href="/rank/base64-03.html">在前端怎么解析base64图片</a></li>
            <li><a href="/rank/base64-02.html">如何正确认识base64图片</a></li>
            <li><a href="/rank/base64-01.html">对base64图片的认识</a></li>
            <li><a href="/rank/json-01.html">json格式验证，feling.net是您不错的选择</a></li>
            <li><a href="/pages/base64.html">理解 Base64 编码</a></li>
            <li><a href="/pages/rank_tip.html">垃圾页面提示</a></li>
        </div>
    </div>
    
    <hr style="margin:0">
    <footer class="uk-grid uk-grid-small" style="background:#f6f6f6;padding: 10px 10px 0 10px;">
        <div class="uk-width-small-1-1 uk-width-medium-1-3 uk-text-small uk-text-muted">
            <span>
                由 聆熵信息技术 维护与更新
            </span><br><br>
            <span>
                开源地址: https://gitee.com/apihub/feling.net
            </span><br><br>
            <span>
                <a href="http://www.beian.miit.gov.cn" rel="nofollow">闽ICP备19012687号</a>
            </span>
        </div>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?7926b3f77abd3abf9b3a5c3ff9608acc";
                var s = document.getElementsByTagName("script")[0]; 
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
    </footer>
</body>
</html>